
<script  lang="ts" setup>
    // import { TOKEN_KEY} from "@/enums/CacheEnum";

    const Token = <string>localStorage.getItem('accessToken');
    const props = defineProps({
		isShowSlotsData: {
			type: Object,
			default: true,
		},
	});
    const loading = ref(false);
    // 保存案件的函数
    const readerData =ref([]);
    watch(()=>props.isShowSlotsData,(newValue:any,oldValue:any)=>{
        // console.log('newValue',newValue);
        readerData.value=newValue.slots;
        loading.value=newValue.isLoading;
    },{immediate:true,deep:true})
</script>

<!-- 卡槽反问右边的信息 -->
<template>
    <section class="h-full w-110 from-list flex flex-col ident-list" v-loading="loading">
        <div class="info-box">
            <el-scrollbar height="100%">
                    <ul class="w-4/5">
                        <div class="p-3 flex font-bold text-base head-title">自动识别的实体</div>
                        <li class="flex" v-for="(item, index) in readerData" :key="index" :class="{ 'highlight': item.value }">
                            <div class="w-3/12" :class="{ 'bg-green': item.value }">{{ item.name }}</div>
                            <div class="w-9/12" :class="{ 'text-green': item.value }"> 
                                <span v-if="item.value">{{ item.value }}</span>
                                <i v-if="item.value" class="checkmark iconfont icon-gou text-2xl"></i>
                            </div>
                        </li>
                    </ul>
                </el-scrollbar>
            </div>
    </section>
</template>

<style scoped>
.info-box{
    padding: 0 15px;
    padding-bottom: 10px;
}

.ident-list{
    background-color: var(--el-bg-color-overlay);
    /* color: var(--v-talk-info-color); */
    border-left: 1px solid var(--v-ai-rate-border-color);
}
.head-title{
    color: var(--v-session-hist);
}
ul {
    margin: 0 auto;
}

ul>div{
    padding: 12px 12px 12px 0;
}
ul>li {
    margin-bottom: 10px;
    border-radius: 5px;
}

ul>li>div:first-child {
    background-color: var(--v-entity-title-bg-color);
    border-radius: 5px 0 0 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding: 8px 0;
}
ul>li>div:last-child {
    background-color: var(--v-entity-bg-color);
    border-radius: 0 5px 5px 0;
    display: flex;
    align-items: center;
    padding: 0 10px;
    justify-content: space-between;
}




.highlight {
    border: 1px solid #67C23A;
}

.bg-green {
    background-color: #67C23A !important;
}

.text-green {
    color: #67C23A;
    background-color: #f4f4f5 !important;
}

.checkmark {
    color: #67C23A;
}
</style>